<template>
    <f7-page>
        <f7-navbar title="验证" back-link="返回" sliding navbar-through></f7-navbar>
        <div class="content-block-title">已向 <span class="text-big" >{{phoneNumber}}</span> 发送短信验证码</div>
        <div class="list-block">
            <ul>
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-email"></i></div>
                        <div class="item-inner">
                            <div class="item-input">
                                <input type="number" placeholder="请输入短信验证码"  v-model="identifyCode">
                            </div>
                            <p class="button" style="width: 120px" @click="ResendValidationCode()" v-if="fetchCodeMsg == true">获取验证码</p>
                            <p class="button" style="width: 120px" v-else="fetchCodeMsg == false">{{timerCodeMsg}}</p>
                            <span ></span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content-block">
            <a class=" button button-big button-fill open-preloader-title" @click="verifyIdentifyCodeToLogin()">下一步</a>
        </div>
    </f7-page>
</template>

<script>
    import config from '../../../src/config/index'
    import data from '../../../src/data/index'

    export default{
        data(){
            return {
                identifyCode:'',
                phoneNumber:this.$route.params.phoneNum,
                timerCodeMsg:'',
                fetchCodeMsg:false
            }
        },
        beforeMount(){
            this.countdown(config.expires.countdownTime);
        },
        methods:{
            /*倒计时*/
            countdown(spaceTime){
                let sec =spaceTime;
                let that = this;
                for(let  i=0; i<=spaceTime; i++){
                    window.setTimeout(function(){
                        if (sec != 0) {
                            that.timerCodeMsg =   sec + "秒" ;
                            sec--;
                        } else {
                            sec = spaceTime;//如果倒计时结束就让  获取验证码显示出来
                            that.fetchCodeMsg = true
                        }
                    }, i * 1000);
                    that.fetchCodeMsg = false;
                }
            },
            ResendValidationCode() {
                //时间过期-重新发送验证码
                this.countdown(config.countdownTime);
                data.login.getVerifyCode(this.$route.params.phoneNum);
            },
            verifyIdentifyCodeToLogin(){
                let that = this;
                window.f7.showIndicator('小麦拼命加载中，请稍后...');
                data.login.useVericodeToLogin(this.$route.params.phoneNum,this.identifyCode,function () {
                    that.$f7.closeModal();
                    window.f7.hideIndicator();
                })
            }
        }
    }
</script>
